<template>
  <div class="student_card">
    <!-- 学生群体 -->
    <div class="group" @click="Addaccount()">
      <div class="group_name">添加账户</div>
      <div class="group_option">
        <svg
          width="6px"
          height="10px"
          viewBox="0 0 6 10"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
          <title>Mask</title>
          <desc>Created with Sketch.</desc>
          <defs>
            <path
              d="M6.29289322,6 L2.14644661,10.1464466 C1.95118446,10.3417088 1.95118446,10.6582912 2.14644661,10.8535534 C2.34170876,11.0488155 2.65829124,11.0488155 2.85355339,10.8535534 L7.70710678,6 L2.85355339,1.14644661 C2.65829124,0.951184464 2.34170876,0.951184464 2.14644661,1.14644661 C1.95118446,1.34170876 1.95118446,1.65829124 2.14644661,1.85355339 L6.29289322,6 Z"
              id="path-1"
            ></path>
          </defs>
          <g
            id="Symbols"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g id="icon/back" transform="translate(-2.000000, -1.000000)">
              <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
              </mask>
              <use
                id="Mask"
                fill="#999999"
                fill-rule="nonzero"
                xlink:href="#path-1"
              ></use>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <!-- 学校和卡号 -->
    <div class="select_import">
      <!-- 学校信息 -->
      <div class="select_school" @click="Changecard()">
        <div class="school_name">企业员工卡换卡</div>
        <div class="school_opt">
          <svg
            width="6px"
            height="10px"
            viewBox="0 0 6 10"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
            <title>Mask</title>
            <desc>Created with Sketch.</desc>
            <defs>
              <path
                d="M6.29289322,6 L2.14644661,10.1464466 C1.95118446,10.3417088 1.95118446,10.6582912 2.14644661,10.8535534 C2.34170876,11.0488155 2.65829124,11.0488155 2.85355339,10.8535534 L7.70710678,6 L2.85355339,1.14644661 C2.65829124,0.951184464 2.34170876,0.951184464 2.14644661,1.14644661 C1.95118446,1.34170876 1.95118446,1.65829124 2.14644661,1.85355339 L6.29289322,6 Z"
                id="path-1"
              ></path>
            </defs>
            <g
              id="Symbols"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <g id="icon/back" transform="translate(-2.000000, -1.000000)">
                <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
                </mask>
                <use
                  id="Mask"
                  fill="#999999"
                  fill-rule="nonzero"
                  xlink:href="#path-1"
                ></use>
              </g>
            </g>
          </svg>
        </div>
      </div>
      <div class="card" @click="Accountlose()">
        <div class="card_name">账户挂失</div>
        <div class="group_option">
          <svg
            width="6px"
            height="10px"
            viewBox="0 0 6 10"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
            <title>Mask</title>
            <desc>Created with Sketch.</desc>
            <defs>
              <path
                d="M6.29289322,6 L2.14644661,10.1464466 C1.95118446,10.3417088 1.95118446,10.6582912 2.14644661,10.8535534 C2.34170876,11.0488155 2.65829124,11.0488155 2.85355339,10.8535534 L7.70710678,6 L2.85355339,1.14644661 C2.65829124,0.951184464 2.34170876,0.951184464 2.14644661,1.14644661 C1.95118446,1.34170876 1.95118446,1.65829124 2.14644661,1.85355339 L6.29289322,6 Z"
                id="path-1"
              ></path>
            </defs>
            <g
              id="Symbols"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <g id="icon/back" transform="translate(-2.000000, -1.000000)">
                <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
                </mask>
                <use
                  id="Mask"
                  fill="#999999"
                  fill-rule="nonzero"
                  xlink:href="#path-1"
                ></use>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Base64 } from "js-base64";
import md5 from "js-md5";

export default {
  data() {
    return {
      num: null,
    };
  },
  computed: {
    //计算属性 监听所填数据是否完整能否提交
  },
  mounted() {
    this.num = null;
      BmacJSBridge.call("setTitle", {
        title: "企业员工卡",
      });
  },
  methods: {
    //添加账户
    Addaccount(){
      console.log("添加账户1");
      let embedding = {
        eventID:"qyygkAddaccount",
        extra:{
          name:"添加账户"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      BmacJSBridge.call(
        "startApp",
        {
          appId: "00000068",
          passData: {
            startSource: "0",
          },
          type: 1,
          url: "/bmac/index.html#/addAccount",
        },
        (result) => {
          // noop
        }
      );
    },

    //企业员工卡换卡
    Changecard() {
      console.log("企业员工卡换卡replaceCard");
      let embedding = {
        eventID:"qyygkChangecard",
        extra:{
          name:"企业员工卡换卡"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      this.$router.push({ path: "/replayCard" });
    },
    //账户挂失
    Accountlose() {
      console.log("账户挂失");
      let embedding = {
        eventID:"qyygkAccountlose",
        extra:{
          name:"企业员工卡账户挂失"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      this.$router.push({ path: "/Report" });
    },
    //获取当前日期
    getDateString() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var nowDate = year + month + day;
      return nowDate;
    },
    //获取当前时间
    getTimeString() {
      var d = new Date();
      var my_hours = d.getHours();
      var my_minutes = d.getMinutes();
      var my_seconds = d.getSeconds();
      if (my_minutes < 10) {
        my_minutes = "0" + my_minutes;
      }
      if (my_seconds < 10) {
        my_seconds = "0" + my_seconds;
      }
      if (my_hours < 10) {
        my_hours = "0" + my_hours;
      }
      my_hours =
        typeof my_hours === "number" ? JSON.stringify(my_hours) : my_hours;
      my_minutes =
        typeof my_minutes === "number"
          ? JSON.stringify(my_minutes)
          : my_minutes;
      my_seconds =
        typeof my_seconds === "number"
          ? JSON.stringify(my_seconds)
          : my_seconds;
      var getTimeString = my_hours + my_minutes + my_seconds;
      return getTimeString;
    },
    //点击立即查询
  },
};
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../common/stylus/mixin.styl';

// 动画
.fade-enter-active {
  transition: all 0.2s ease;
}

.fade-leave-active {
  transition: all 0.2s;
}

.fade-enter, .fade-leave-to {
  transform: translateY(120px);
  opacity: 0;
}

// 外层盒子
.bb {
  font-size: 14px;
}

.student_card {
  width: 100%;
  height: 100%;
  background-color #F5F5F5
  .group {
    margin-top: 16px;
    height: 52px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 14px;

    .group_name {
      text-align: center;
      line-height: 52px;
    }

    .group_option {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .group:active {
    background: #e6e6e6;
  }

  .billd {
    background: #e6e6e6;
  }

  .select_import {
    margin-top: 16px;
    background: #ffffff;
    font-size: 14px;

    .select_school {
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
      height: 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      // border-bottom thin solid #E6E6E6
      .school_opt {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .select_school:active {
      background: #e6e6e6;
    }

    .select_school:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0rem;
      background: #e6e6e6;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    .school_name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 14px;
    }

    .select_name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      letter-spacing: 0;
      text-align: right;
      line-height: 14px;
    }

    .selects {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      text-align: right;
      line-height: 14px;
    }

    .card {
      height: 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-right: 16px;
      padding-left: 16px;
      box-sizing: border-box;

      .card_name {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 14px;
      }

      .group_option {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .card:active {
      background: #e6e6e6;
    }
  }
}
</style>
